<template>
<div id="app">
    <el-container>
        <el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" width="65%" :before-close="handleClose">
            <span>
                <el-form :inline="true" :model="addstudent" class="demo-form-inline">
                    <el-divider content-position="left">基本信息</el-divider>
                    <el-form-item label="学号：">
                        <el-input v-model="addstudent.snumber" placeholder="亲输入学号"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名：">
                        <el-input v-model="addstudent.name" placeholder="亲输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="班级：">
                        <el-input v-model="addstudent.class" placeholder="请输入班级"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：">
                        <el-radio v-model="addstudent.sex" label="男">男</el-radio>
                        <el-radio v-model="addstudent.sex" label="女">女</el-radio>
                    </el-form-item>
                    <el-divider content-position="left">成绩信息</el-divider>

                    <el-form-item label="c语言：">
                        <el-input v-model="addstudent.clan"></el-input>
                    </el-form-item>
                    <el-form-item label="java语言：">
                        <el-input v-model="addstudent.javalan"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库：">
                        <el-input v-model="addstudent.dblan"></el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAndUpdateStudent">确 定</el-button>
            </span>
        </el-dialog>
        <el-header><i class="el-icon-edit"></i>学生成绩管理系统</el-header>
        <el-row>
            <el-form :inline="true" :model="qStudent" class="demo-form-inline">
                <el-form-item label="学号：" prop="snumber" :rules="[
            {min:3,max:3,message:'请输入3位数字', trigger: 'blur'}
          ]">
                    <el-input v-model="qStudent.snumber" placeholder="精准搜索"></el-input>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="qStudent" class="demo-form-inline">
                <el-form-item label="姓名：">
                    <el-input v-model="qStudent.name" placeholder="模糊搜索"></el-input>
                </el-form-item>
            </el-form>

            <el-button size="small" @click="selQuery()">查询</el-button>

            <el-button size="small" @click="add">录入</el-button>
        </el-row>

        <el-main>
            <template>
                <el-table :data="StudentList" border style="width: 70%;margin:0 auto;text-align:center;">
                    <el-table-column prop="snumber" label="学号" style="width:100px" width="100">
                    </el-table-column>
                    <el-table-column prop="class" label="班级" style="width:100px" width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="100">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="clan" label="c语言" width="250">
                    </el-table-column>
                    <el-table-column prop="javalan" label="java设计">
                    </el-table-column>
                    <el-table-column prop="dblan" label="数据库">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                            <el-button @click="del(scope.row._id)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination @current-change="currentChange" background layout="prev, pager, next" :page-size="page.pageSize" :current-page="page.curPage" :total="page.total">
            </el-pagination>
        </el-main>
        <el-footer>

        </el-footer>
    </el-container>

</div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            addstudent: { //录入学生字段
                snumber: "",
                name: '',
                class: '',
                clan: '',
                javalan: '',
                dblan: ''
            },
            //分页
            page: {
                curPage: 1,
                pageSize: 2,
                total: 0,
            },
            StudentList: [], // 显示学生表格
            id: '', // 更新学生时的id
            qStudent: { //搜索
                snumber: '',
                name: '',
            },
            dialogTitle: '', //拟态框的标题
            centerDialogVisible: false, //拟态框可见
        }
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        selQuery() {
            const qStudent = this.qStudent;
            var that = this;
            if (qStudent.snumber !== "" && qStudent.name === "") {
                this.page.curPage = 1;
                console.log("通过学号查询");
                this.$http.get(`/findByNumber/${qStudent.snumber}`).then((res) => {
                    console.log(res);
                    that.StudentList = res.data;
                    this.$message({
                        message: '查询成功',
                        type: 'success'
                    })
                    //that.qStudent.snumber = '';
                    that.page.total = 0;
                })
            } else if (qStudent.snumber === "" && qStudent.name !== "") {
                console.log("通过姓名查询");
                this.page.curPage = 1;
                this.$http.get('findByName?name=' + this.qStudent.name + '&pageSize=' + this.page.pageSize + '&curPage=' + this.page.curPage).then((res) => {
                    console.log(res);
                    that.StudentList = res.data.data;
                    that.page.total = res.data.total;
                    this.$message({
                        message: '查询成功',
                        type: 'success'
                    })

                })
            } else if (qStudent.snumber === "" && qStudent.name === "") {
                this.pageInation();
            } else {
                this.$message("学号和姓名不能同时输入");
            }

        },
        add() {
            //如果之前编辑过，清除之前学生信息
            this.addstudent = {
                snumber: "",
                name: '',
                class: '',
                clan: '',
                javalan: '',
                dblan: ''
            };
            this.centerDialogVisible = true
            this.dialogTitle = '录入学生信息'
        },
        // 录入学生信息到数据库
        addStudent() {
            this.$http.post('students', this.addstudent).then(() => {
                // 清空录入信息
                this.addstudent = {
                    snumber: "",
                    name: '',
                    class: '',
                    clan: '',
                    javalan: '',
                    dblan: ''
                }
                //隐藏录入框
                this.centerDialogVisible = false
                this.$message({
                    message: '录入成功',
                    type: 'success'
                })
                this.pageInation();
            })
        },
        // 更新学生信息到数据库
        updateStudent(id) {
            this.$http.put(`update/${id}`, this.addstudent).then((res) => {
                console.log(res);
                this.centerDialogVisible = false;
                this.$message({
                    message: '更新成功',
                    type: 'success'
                });
                this.addstudent = {
                    snumber: "",
                    name: '',
                    class: '',
                    clan: '',
                    javalan: '',
                    dblan: ''
                };
                this.pageInation();
            })
        },
        // 添加或更新学生信息
        addAndUpdateStudent() {
            this.centerDialogVisible = false;
            if (this.dialogTitle == '录入学生信息') {
                this.addStudent();
            } else {
                this.updateStudent(this.id);
                console.log(1);
            }
        },
        //删除学生信息 -行数据
        del(id) {
            console.log(id);
            this.$http.delete(`student/${id}`).then(() => {
                this.$message({
                    message: "删除学生成功",
                    type: 'success'
                })
                this.pageInation();
            })
        },
        //点击编辑按钮获取学生的信息，进入编辑界面
        edit(row) {
            // console.log(row);
            this.id = row._id;
            this.dialogTitle = "编辑学生信息";
            this.getRowInfo(row);
            this.centerDialogVisible = true;

        },
        //获取当前行的学生信息
        getRowInfo(row) {
            const {
                snumber,
                sex,
                name,
                dblan,
                clan,
                javalan
            } = row;
            var classes = row.class;
            [this.addstudent.class, this.addstudent.snumber, this.addstudent.sex, this.addstudent.name, this.addstudent.dblan, this.addstudent.clan, this.addstudent.javalan] = [classes, snumber, sex, name, dblan, clan, javalan]
            console.log(this.addstudent)
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },
        //分页查询学生信息
        pageInation() {
            let that = this;
            //每次点击更改页码值
            this.$http.get('studentList?curPage=' + that.page.curPage + '&pageSize=' + that.page.pageSize).then(res => {
                //考虑其他页删除后跳转到上一页
                if (res.data.data == null || res.data.data.length === 0) {
                    that.page.curPage = that.page.curPage - 1;
                    that.pageInation();
                } else {
                    that.StudentList = res.data.data;
                    that.page.total = res.data.total;
                }

            });
        },
        currentChange(current) {
            let that = this;
            this.page.curPage = current;
            // 考虑模糊查询下的分页
            if (this.qStudent.name !== '') {
                this.$http.get('findByName?name=' + this.qStudent.name + '&pageSize=' + that.page.pageSize + '&curPage=' + current).then(res => {
                    that.StudentList = res.data.data;
                    that.page.total = res.data.total;
                })
                return;
            }
            this.pageInation();
        }
    },
    created: function () {
        console.log("created success");
        this.pageInation();

    }
}
</script>

<style>
.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
}

.el-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin-top: 15px;
}

.el-row>.el-button {
    margin-bottom: 22px;
}

.el-dialog__footer {
    text-align: center !important;
}
</style>
